<template>
	<view class="goods-main">
		 <view style="height: 10px;"></view>
		<!-- 头部  请输入内容-->
		<input class="user-input" type="text" :value=goodsname name="search" v-model="goodsname" @blur="getGoodsName()" placeholder="请输入商品名称" >
		
		<!-- 商品列表开始 -->
		<view v-for="(item, index) in goodsList" class="goods-item-wrap" @click="selectTap(item.goodsId)">
			<image :src="item.goodsLogo" class="goods-image" />

			<view class="goods-content-wrap">
				<view class="goods-name">【{{ item.goodsSn }}】{{ item.goodsName }}</view>

				<view class="goods-stock-wrap">
					<view class="goods-stock">库存 {{ item.storeCount }}</view>
					<view class="goods-sell-count">销量 {{ item.clickCount }}</view>
				</view>

				<view class="goods-price">
				<view class="shop-title3">
					
					<view class="shop-title-text">
						￥{{ item.marketPrice }}.00
					</view>
					<view class="shop-title-img">
						<image src="../../../static/images/shoping.png" align="right"  class="shop-title-img"   ></image>
					</view>
				</view>
				</view>
				

				
			</view>
		</view>
		<!-- 商品列表结束 -->

		<!-- 空白页开始 -->
		<view class="goods-empty-wrap" v-if="goodsList.length <= 0">
			暂无商品
		</view>
		<!-- 空白页结束 -->

	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsname:"",
				goodsList: [{
						goodsId: 1,
						status: 1,
						storeCount: 999,
						clickCount: 1,
						goodsLogo: "https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/e8f761987bebf25f31114c784d15703e.png",
						goodsName: "【小编严选】小程序sketch ui 电商设计稿",
						marketPrice: 9.99
					},
					{
						goodsId: 2,
						status: 1,
						storeCount: 999,
						clickCount: 1,
						goodsLogo: "https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png",
						goodsName: "【小编严选】Sketch + PS WEB后台管理源文件",
						marketPrice: 9.99
					},
					
				],
			}
		},
		onLoad() {

		},
		methods: {
			getGoodsName(){
				let data={"goodsName":this.goodsname}
				
				uni.showToast({title:"输入框内容为："+this.goodsname})
				if(this.goodsname.trim()!=""){
					this.request({
							url: 'shop/getMallGoods',
							method: 'POST',
							data:data
							}).then(res => {
								console.log(res)
								this.goodsList=res.data
							})
				}
				
			},
			selectTap(goodsId) {
				uni.navigateTo({
					url:'/pages/shop/shop_list/goods-detail?goodid='+goodsId
				})
			},

		
		}
	}
</script>

<style lang="scss" scoped>
	.user-input {
		
	            width: 95%;
	            height: 40px;
				margin: 0 auto;
				// box-shadow: 2px 2px 2px 2px #c6c9cf;
	            //border: 2px solid #ffffff;
				background-color:#ffffff ;
	            border-radius: 5px;
	            box-sizing: border-box;
	            outline: none;
	            text-indent: 10px;
	}
	.goods-main {
		background-color: #f4f4f4;
		min-height: 100vh;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 190rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.goods-stock {
		margin-right: 24rpx;
	}

	.goods-price {
		font-size: 48rpx;
		color: #cb0000;
		margin-top: 24rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}

	.goods-option-item-action {
		background: #f1f0fe;
		color: #6991ce;
	}

	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	

	

	.goods-header-item {
		margin-right: 24rpx;
	}



	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
	.shop-title3{
		display: flex;
		height: 30%;
		font-size: 45rpx;
		vertical-align: bottom;
		//background-color: #412a56;
		image{
			width: 33px;
			height: 33px;
		}
	}
	.shop-title-text{
		width: 80%;
		background-color: #ffffff;
	}
	.shop-title-img{
		/* background-color: #ffffff; */
		width:35px;
		height: 35px;
	}
</style>
